<template>
    <el-card>
        <el-button type="primary" :icon="Plus" class="mb-[20px]" v-perm="'sys:dept:add'"
            @click="openAddOrUpdatePage('add', null)">添加</el-button>
        <el-table :data="tableData" height="calc(100vh - 185px)" max-height="calc(100vh - 185px)" stripe
            :header-cell-style="{ 'background-color': 'rgba(229, 231, 235, var(--tw-bg-opacity))' }" row-key="id"
            v-loading="loading">
            <el-table-column prop="name" label="部门名称" width="300px" fixed="left" />
            <el-table-column prop="sort" label="排序" width="120px" />
            <el-table-column label="部门领导" width="220px">
                <template #default="scope">
                    {{ scope.row.leaderUsername ? `${scope.row.leaderRealName}${scope.row.leaderRealName ? ' (' +
                        scope.row.leaderUsername + ')' : ''}` : scope.row.leaderUsername || '' }}
                </template>
            </el-table-column>
            <el-table-column label="创建人" width="150px">
                <template #default="scope">
                    {{ scope.row.createByRealName }}({{ scope.row.createByUsername }})
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="200px" />
            <el-table-column label="更新人" width="150px">
                <template #default="scope">
                    {{ scope.row.updateByUsername ? `${scope.row.updateByRealName}${scope.row.updateByRealName ? ' (' +
                        scope.row.updateByUsername + ')' : ''}` : scope.row.updateByUsername || '' }}
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="200px" />
            <el-table-column prop="remark" label="备注" width="200px" />
            <el-table-column fixed="right" label="操作" width="140px">
                <template #default="scope">
                    <el-button link type="warning" size="small" :icon="Edit" v-perm="'sys:dept:update'"
                        @click="openAddOrUpdatePage('update', scope.row)">修改</el-button>
                    <el-button link type="danger" size="small" :icon="Delete" v-perm="'sys:dept:delete'"
                        @click="deleteById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <AddOrUpdate ref="addOrUpatePageRef" :querySelective="querySelective" :deptTree="tableData" :users="users"></AddOrUpdate>
</template>
<script setup>
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { queryDeptTreeReq, deleteReq } from '@/api/sys/dept/index.js'
import { selectReq } from '@/api/sys/user/index.js'
import AddOrUpdate from '@/views/sys/dept/AddOrUpdate.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const loading = ref(false)
const users = ref([])
const tableData = ref([])
onMounted(async () => {
    loading.value = true;
    const userRes = await selectReq();
    if (userRes.code == 200) {
        users.value = userRes.data
    }
    querySelective();
})

const querySelective = () => {
    queryDeptTreeReq().then(res => {
        if (res.code == 200) {
            tableData.value = res.data
        }
    }).finally(() => {
        loading.value = false
    })
}

const addOrUpatePageRef = ref()
const openAddOrUpdatePage = (type, row) => {
    addOrUpatePageRef.value?.open(type, row)
}

const deleteById = (id) => {
    ElMessageBox.confirm(
        '此操作将删除本部门，您确定要继续吗？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteReq(id).then(res => {
            if (res.code == 200) {
                ElMessage.success(res.message)
                querySelective();
            }
        })
    })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除！',
            })
        })
}
</script>